<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    var handleTableEditBtn = function(el){
      // 当点击第一行的⬇时，该行显示两个按钮，目标行显示一个按钮
      if (oldId == 1 && dir == 1) {
        // 共两行，该行显示一个按钮，目标行显示一个按钮
        if (total == 2) {
          $tr.find(".upImgBtn").show();
          $tr.find(".downImgBtn").hide();
          var $nextTr = $(el).parents("tr").next("tr");
          $nextTr.find(".upImgBtn").hide();
          $nextTr.find(".downImgBtn").show();
        } else {
          $tr.find(".upImgBtn").show();
          $tr.find(".downImgBtn").show();
          var $nextTr = $(el).parents("tr").next("tr");
          $nextTr.find(".upImgBtn").hide();
          $nextTr.find(".downImgBtn").show();
        }
      }// 当点击第二行的⬆时，该行显示一个按钮，目标行显示两个按钮
      else if (oldId == 2 && dir == 0) {
        if (total == 2) {
          $tr.find(".upImgBtn").hide();
          $tr.find(".downImgBtn").show();
          var $nextTr = $(el).parents("tr").prev("tr");
          $nextTr.find(".upImgBtn").show();
          $nextTr.find(".downImgBtn").hide();
        } else {
          $tr.find(".upImgBtn").hide();
          $tr.find(".downImgBtn").show();
          var $nextTr = $(el).parents("tr").prev("tr");
          $nextTr.find(".upImgBtn").show();
          $nextTr.find(".downImgBtn").show();
        }
      }// 当点击倒数第二行的⬇时，该行显示一个按钮，目标行显示两个按钮
      else if (oldId == total - 1 && dir == 1) {
        $tr.find(".upImgBtn").show();
        $tr.find(".downImgBtn").hide();
        var $nextTr = $(el).parents("tr").next("tr");
        $nextTr.find(".upImgBtn").show();
        $nextTr.find(".downImgBtn").show();
      }// 当点击倒数第一行的⬆时，该行显示两个按钮，目标行显示一个按钮
      else if (oldId == total && dir == 0) {
        $tr.find(".upImgBtn").show();
        $tr.find(".downImgBtn").show();
        var $nextTr = $(el).parents("tr").prev("tr");
        $nextTr.find(".upImgBtn").show();
        $nextTr.find(".downImgBtn").hide();
      }

      // 目标行
      var $targetTr;

      // 特殊处理（首行下移）
      if ($div.attr("data-rowid") == 1 && dir == 1) {
        $tr.find(".rowNum").find(".rowNumClass").attr("data-rowid", 2);
        $tr.data("rowspanNum",total);
        var str = $tr.html();
        var start = str.indexOf("</td>") + 5;
        var end = str.lastIndexOf("<td")
        // 第一行头部
        var startPart = str.substring(0, start);

        // 第一行尾部
        var endPart = str.substring(str.lastIndexOf("<td"));

        // 第一行中部
        var oneLine = str.substring(start, end);//截取字符串

        // 第二行
        $targetTr = $(el).parents("tr").next("tr");
        $targetTr.find(".rowNum").find(".rowNumClass").attr("data-rowid", 1);
        var twoLine = $targetTr.html();

        var result1 = startPart + twoLine + endPart;
        var result2 = oneLine

        $tr.html(result1);
        $targetTr.html(result2);

        var data = $targetTr.find("td").eq(3).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
          editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
          editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $targetTr.find("td").eq(2).find(".editable").html(editable);

        $targetTr.before("<tr>" + $tr.html() + "</tr>")
        // $targetTr.insertBefore
        $targetTr.data("updatedSort", true);
        // $targetTr.closest(".tableOptionBtnBox").attr("btn", 1);
        $tr.remove();
        // return;
      }
              // 特殊处理（第二行上移）
      // else if ($div.data("rowid") == 2 && dir == 0) {
      else if ($div.attr("data-rowid") == 2 && dir == 0) {
        // 第一行
        $targetTr = $(el).parents("tr").prev("tr");
        $targetTr.data("rowspanNum",total);

        var data = $tr.find("td").eq(3).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
          editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
          editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $tr.find("td").eq(2).find(".editable").html(editable);

        var data = $tr.find("td").eq(2).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
          editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
          editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $tr.find("td").eq(2).find(".editable").html(editable);

        var str = $targetTr.html();
        var start = str.indexOf("</td>") + 5;
        var end = str.lastIndexOf("<td")
        // 第一行头部
        var startPart = str.substring(0, start);
        // 第一行尾部
        var endPart = str.substring(str.lastIndexOf("<td"));
        // 第一行中部
        var oneLine = str.substring(start, end);//截取字符串

        // 第二行
        var twoLine = $tr.html();

        var result1 = startPart + twoLine + endPart;
        var result2 = oneLine
        $tr.html(result1);
        $targetTr.html(result2);
        $targetTr.before("<tr>" + $tr.html() + "</tr>")
        $targetTr.data("updatedSort", true);
        // $targetTr.closest(".tableOptionBtnBox").attr("btn", 1);
        $tr.remove();
      }
      // 上移
      else if (dir == 0) {
        $targetTr = $(el).parents("tr").prev("tr");

        var data = $tr.find("td").eq(2).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
          editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
          editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $tr.find("td").eq(2).find(".editable").html(editable);

        $targetTr.before("<tr>" + $tr.html() + "</tr>");
        $targetTr.data("updatedSort", true);
        $tr.remove();
      }
      // 下移
      else {
        $targetTr = $(el).parents("tr").next("tr");

        var data = $targetTr.find("td").eq(2).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
          editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
          editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $targetTr.find("td").eq(2).find(".editable").html(editable);

        $tr.before("<tr>" + $targetTr.html() + "</tr>");
        $tr.data("updatedSort", true);
        $targetTr.remove();
      }


      "use strict";
      if(el){ // TODO 保存到服务器
        var $el = $(el);
        var $tr = $el.closest("tr");
        var rowspanNum = $tr.data("rowspanNum");
        var btnOption = $el.closest(".tableOptionBtnBox").data("btn");
        var tableOptionBtnBox = $el.closest(".tableOptionBtnBox");
        var $editBtn = $el.closest(".tableOptionBtnBox").find(".editBtn");
        if(btnOption){ // 编辑状态 -> 查看状态
          $el.attr("disabled",true);
          updateAppDataDialog($el);

        }else{ // 查看状态 -> 编辑状态 检查当前APP是否可编辑
          $editBtn.attr("disabled",true);
          checkUpdateAppDataStatus().done(function () {
            $editBtn.attr("disabled",false);
            tableOptionBtnBox.data("btn", 1);
            tableOptionBtnBox.find(".saveBtn").show();
            tableOptionBtnBox.find(".editBtn").hide();
            nextElements($tr, rowspanNum, handleNotEditable);
          }).fail(function () {
            $editBtn.attr("disabled",false);
          });
        }
      }
    };
  </script>
</head>
<body>
<button class="btn btn-info editBtn" style="display:inline-block" onclick="handleTableEditBtn(this)">编辑</button>
<button class="btn btn-primary saveBtn" style="display:none" onclick="handleTableEditBtn(this)">保存</button>


</body>
</html>